<template>
	<view class="docyy">
		<!-- 头部 -->
		<view class="doc_title">
			<image class="doc_portrait" :src="dataobj.img"></image>
			<view class="title_info">
				<view class="font18 font-323232 font-b">{{dataobj.name}}</view>
				<view class="font14 font-989898">{{dataobj.academic_title_name.name}}</view>
			</view>
			<view class="title_follow" @click="Onaddfollow">
				{{dataobj.is_follow == 0 ?'+关注':'已关注'}}
			</view>
		</view>
		<!-- 边框 -->
		<view class="com_border"></view>
		<!-- 日期 -->
		<view class="time_title font13 font-989898">已选日期 :<text class="font-323232 font-b">{{day}} {{week}}</text>
		</view>
		<view class="mzyy_title">
			<view class="time_list">
				<view v-for="(item,index) in timeList" :key="index" class="time_listbos" v-if="item.getDay"
					@click="Ontime(item)">
					<view class="time_listbox" :class="item.date == day?'background_6bcbb6':'background_ffffff'">
						<view :class="item.date == day?'font-ffffff':'font-989898'" class="font11">{{item.getDay}}
						</view>
						<view :class="item.date == day?'font-ffffff':'font-6bcbb6'" class="font13">{{item.getDate}}号
						</view>
						<view :class="item.date == day?'font-ffffff':'font-c8c8c8'" class="font10">{{item.status}}
						</view>
					</view>
				</view>
			</view>
			<view class="title_choice" @click="Onchoice">
				<image src="../../static/arrow-circle-down.png"></image>
			</view>
		</view>
		<!-- 数据 -->
		<view class="docyy_data">
			<view class="docyy_list" v-for="(item,index) in doctime" :key="index" @click="OnPopupshow(item)">
				<view class="font-323232">{{item.title}}:{{item.begin}}~{{item.end}} 余号{{item.num}}</view>
				<view class="docyy_bos">
					<view>￥{{item.moeny}}</view>
					<image src="../../static/my/morea.png"></image>
				</view>
			</view>
		</view>
		<!-- 预约弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="ComPopup_bos">
				<view class="popup_title">
					<view class="popup_time font15 font-323232 font-b">预约</view>
					<image @click="Onclose" class="popup_img" src="../../static/close.png"></image>
				</view>
				<view class="ComPopup_title">
					<image class="ComPopup_image" :src="dataobj.img"></image>
					<view class="ComPopup_titlebos">
						<view class="ComPopup_titlebox">
							<view class="font-32323 font14 font-b">医师:</view>
							<view class="ComPopup_info">
								<view class="font-989898 font14">{{dataobj.name}}</view>
							</view>
						</view>
						<view class="ComPopup_titlebox">
							<view class="font-32323 font14 font-b">科室:</view>
							<view class="ComPopup_info">
								<view class="font-989898 font14">{{dataobj.room_name}}</view>
							</view>
						</view>
						<view class="ComPopup_titlebox">
							<view class="font-32323 font14 font-b">费用:</view>
							<view class="ComPopup_info">
								<view class="font-989898 font14"><text>￥{{docobj.moeny}}</text></view>
							</view>
						</view>
						<view class="ComPopup_titlebox">
							<view class="font-32323 font14 font-b">时段:</view>
							<view class="ComPopup_info">
								<view class="font-989898 font14">{{day}} {{week}}</view>
								<view class="font-989898 font14">{{docobj.begin}}~{{docobj.end}} </view>
							</view>
						</view>
					</view>
				</view>
				<view class="ComPopup_choois font-32323 font14 font-b">请选择就诊人</view>
				<view class="ComPopup_chooisa font-989898 font14">
					({{familyobj.the_patient_info.name?familyobj.the_patient_info.name+'卡号:'+familyobj.the_patient_info.code:'暂无'}})
				</view>
				<view class="ComPopup_list">
					<view class="ComPopup_listname" :class="item.id==familyobj.id?'listname_a':'listname_b'"
						v-for="(item,index) in familyList" :key="index" @click="Onchooisfamily(item)">
						{{item.the_patient_info.namea}}
					</view>
					<view class="ComPopup_listadd" @click="Onjzrgladd">+</view>
					<!-- <view class="ComPopup_listadd" v-if="familyList.length==0">+</view> -->
				</view>
				<view class="popup_determine font-ffffff font15" @click="Onconfirm">确认挂号</view>
			</view>
		</uni-popup>
		<Com-popuptime ref="compopuptime" @OnComconfirm="OnComconfirm"></Com-popuptime>
	</view>
</template>

<script>
	import ComPopuptime from '@/components/ComPopuptime.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			ComPopuptime,
			uniPopup
		},
		data() {
			return {
				id: null,
				day: '', //日期
				dataobj: {}, //医生详情
				week: '', //周几
				timeList: [], //日历时间
				doctime: [], //医生排版时间
				docobj: {}, //选择的时间段
				familyList: [], //就诊人列表
				familyobj: {}, //默认就诊人
			}
		},
		onLoad: function(options) {
			this.id = options.id
			this.day = options.day
			//医生详情
			this.Ondoctordetails()
			//日期列表
			this.Ontimelist()
			//获取医生排班和费用
			this.OnDetails()
			//获取就诊人
			this.OnPatient()
		},
		methods: {
			// 日期列表
			Ontimelist() {
				this.$Http({
					url: 'doctorDate',
					data: {
						doctor_id: this.id,
					}
				}).then(res => {
					this.timeList = this.$base.OnDate(res.data)
					this.timeList.forEach(item => {
						if (item.date == this.day) {
							this.week = item.getDay
						}
					})
				})
			},
			//医生详情时间列表挂号周期
			OnDetails() {
				this.$Http({
					url: 'Details',
					token: false,
					data: {
						doctor_id: this.id,
						time: this.day
					}
				}).then(res => {
					if (res.code == 1) {
						let list = [{
								title: '上午',
								id: 'morning',
								begin: res.data.morning_begin_time,
								end: res.data.morning_end_time,
								moeny: res.data.money,
								num: res.data.morning_number,
							},
							{
								title: '下午',
								id: 'afternoon',
								begin: res.data.afternoon_begin_time,
								end: res.data.afternoon_end_time,
								moeny: res.data.money,
								num: res.data.afternoon_number,
							},
							{
								title: '晚上',
								id: 'night',
								begin: res.data.night_begin_time,
								end: res.data.night_end_time,
								moeny: res.data.money,
								num: res.data.night_number,
							}
						]
						this.doctime = list
					}
				})
			},
			//详情
			Ondoctordetails() {
				this.$Http({
					url: 'doctorDetails',
					data: {
						doctor_id: this.id,
					}
				}).then(res => {
					res.data.img = this.$store.state.http_img + res.data.img
					this.dataobj = res.data
				})
			},
			//添加关注
			Onaddfollow() {
				let url = ''
				if (this.dataobj.is_follow == 0) {
					url = 'addUserDoctor'
				} else {
					url = 'deladdUserDoctor'
				}
				this.$Http({
					url: url,
					data: {
						doctor_id: this.id,
					},
					show: true,
					type: 'POST'
				}).then(res => {
					if (res.code == 1) {
						if (this.dataobj.is_follow == 1) {
							this.dataobj.is_follow = 0
						} else {
							this.dataobj.is_follow = 1
						}
					}
				})
			},
			//选择时间
			Ontime(e) {
				this.day = e.date
				this.week = e.getDay
				this.OnDetails()
			},
			//组件确认选择时间
			OnComconfirm(e) {
				this.timeList.forEach(item => {
					if (item.day == e) {
						this.week = item.getDay
					}
				})
				this.day = e
				this.OnDetails()
			},
			//查看时间
			Onchoice() {
				this.$refs.compopuptime.Onshow(this.timeList, this.day);
			},
			//预约弹窗
			OnPopupshow(e) {
				if (e.num < 0) {
					return
				}
				this.docobj = e
				this.$refs.popup.open()
			},
			//获取就诊人
			OnPatient() {
				this.$Http({
					url: 'listThePatient',
					data: {}
				}).then(res => {
					if (res.code == 1) {
						if (!res.data || res.data.length == 0) {} else {
							this.familyList = res.data
							this.familyobj = res.data[0] ? res.data[0] : {}
							res.data.forEach(item => {
								item.the_patient_info.namea = item.the_patient_info.name.substring(item
									.the_patient_info.name.length - 2)
								if (item.isdefault == 1) {
									this.familyobj = item
								}
							})
						}
					}
				})
			},
			//选择就诊人
			Onchooisfamily(e) {
				this.familyobj = e
			},
			//关闭弹窗
			Onclose() {
				this.$refs.popup.close()
			},
			//确认挂号
			Onconfirm() {
				let data = {
					point_type: this.docobj.id,
					doctor_id: this.dataobj.id,
					time: this.day,
					the_patient_id: this.familyobj.the_patient_info.id
				}
				this.$Http({
					url: 'createHangNumberOrder',
					data: data,
					type: 'POST',
					show: true
				}).then(res => {
					if (res.code = 1) {
						this.$refs.popup.close()
						uni.navigateTo({
							url: '/pagesA/register/conpay?id=' + res.data.order_code,
						});
					}
				})
			},
			//添加就诊人
			Onjzrgladd() {
				this.$store.commit('Onjzkurl', '/pagesA/register/docyy?id=' + this.id + '&day=' + this.day)
				uni.navigateTo({
					url: '/pagesA/my/jzrgladd',
				})
			}
		}
	}
</script>

<style>
	/* 头部 */
	.doc_title {
		height: 250rpx;
		width: 750rpx;
		padding: 25rpx 30rpx;
		display: flex;
		position: relative;
	}

	.doc_portrait {
		height: 200rpx;
		width: 180rpx;
		border-radius: 12rpx;
	}

	.title_info {
		width: 480rpx;
		height: 200rpx;
		margin-left: 30rpx;
	}

	.title_info view:nth-of-type(1) {
		margin-bottom: 40rpx;
	}

	.title_follow {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		height: 50rpx;
		width: 120rpx;
		line-height: 50rpx;
		text-align: center;
		border: 2rpx solid #62c7b2;
		border-radius: 6rpx;
		font-size: 24rpx;
		color: #62c7b2;
	}

	/* 日期 */
	.time_title {
		padding: 26rpx 0 26rpx 25rpx;
	}

	.time_title text {
		margin-left: 20rpx;
	}

	.mzyy_title {
		width: 750rpx;
		height: 126rpx;
		position: relative;
	}


	.mzyy_yuyue {
		width: 124rpx;
		height: 126rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.time_list {
		width: 750rpx;
		height: 126rpx;
		overflow: hidden;
		overflow-x: scroll;
		white-space: nowrap;
		padding-right: 86rpx;
	}

	.time_listbos {
		width: 124rpx;
		height: 126rpx;
		display: inline-block;
	}

	.time_listbox {
		width: 124rpx;
		height: 126rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.background_ffffff {
		background-color: #ffffff;
	}

	.background_6bcbb6 {
		background-color: #6bcbb6;
	}

	.title_choice {
		height: 126rpx;
		width: 86rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title_choice image {
		width: 36rpx;
		height: 36rpx;
	}

	/* 数据 */
	.docyy_data {
		background-color: #f9f9f9;
	}

	.docyy_list {
		width: 690rpx;
		margin-left: 30rpx;
		padding: 32rpx 0;
		background-color: #f9f9f9;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #f2f2f2;
	}

	.docyy_bos {
		display: flex;
		color: #f1a55e;
	}

	.docyy_bos image {
		height: 26rpx;
		width: 14rpx;
		margin-left: 30rpx;
	}

	/* 预约弹窗 */
	.ComPopup_bos {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.popup_title {
		position: relative;
		width: 750rpx;
		height: 106rpx;
	}

	.popup_time {
		width: 750rpx;
		text-align: center;
		height: 106rpx;
		line-height: 106rpx;
	}

	.popup_img {
		height: 36rpx;
		width: 36rpx;
		position: absolute;
		top: 35rpx;
		right: 20rpx;
	}

	.ComPopup_title {
		width: 750rpx;
		padding: 0rpx 0 52rpx 35rpx;
		display: flex;
		align-items: center;

		border-bottom: 2rpx #e8e8e8 solid;
	}

	.ComPopup_title {
		display: flex;
		width: 680rpx;
	}

	.ComPopup_image {
		height: 172rpx;
		width: 156rpx;
		border: 1rpx solid #e3e9e8;
		border-radius: 10rpx;
	}

	.ComPopup_titlebos {
		width: 500rpx;
		margin-left: 36rpx;
	}

	.ComPopup_titlebox {
		display: flex;
		margin-bottom: 26rpx;
	}

	.ComPopup_titlebox:last-of-type {
		margin-bottom: 0rpx;
	}

	.ComPopup_info {
		padding-left: 20rpx;
		width: 370rpx;
	}

	.ComPopup_titlebox text {
		color: #f1a55e;
	}

	.ComPopup_choois {
		margin: 44rpx 0 24rpx 25rpx;
	}

	.ComPopup_chooisa {
		margin-left: 25rpx;
		margin-bottom: 20rpx;
	}

	.ComPopup_list {
		display: flex;
		flex-wrap: wrap;
		padding-left: 25rpx;
	}

	.ComPopup_list view {
		margin-right: 44rpx;
		margin-bottom: 40rpx;
	}

	.ComPopup_list view:nth-of-type(5n) {
		margin-right: 0rpx;
	}

	.ComPopup_listname {
		font-size: 28rpx;
		height: 104rpx;
		width: 104rpx;
		border-radius: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.listname_a {
		background-color: #6bcbb6;
		color: #fff;
	}

	.listname_b {
		background-color: #fff;
		color: #6bcbb6;
		border: 2rpx solid #6bcbb6;
	}

	.ComPopup_listadd {
		height: 104rpx;
		width: 104rpx;
		border-radius: 52rpx;
		border: 2rpx solid #6bcbb6;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 50rpx;
		color: #6bcbb6;
	}

	.popup_determine {
		height: 80rpx;
		background-color: #6bcbb6;
		line-height: 80rpx;
		text-align: center;
	}
</style>
